import React from 'react';
import Skeleton from './Skeleton';

const Animation = () => {
	return (
		<div className='space-y-32'>
			<h2 className=' text-2xl'>Animation</h2>
			{/* animate-spin */}
			<div className='flex items-center justify-center'>
				<button
					type='button'
					className='py-2 px-4
				inline-flex gap-4 items-center
				shadow rounded-md
				bg-indigo-500 hover:bg-indigo-400
				transition ease-in-out duration-150
				cursor-not-allowed
				text-white
				font-bold
				'
					disabled
				>
					<svg
						className='h-10 w-10 animate-spin'
						viewBox='0 0 1024 1024'
						version='1.1'
						xmlns='http://www.w3.org/2000/svg'
						p-id='6462'
						width='200'
						height='200'
					>
						<path
							fill='white'
							d='M889.3671875 697.51953124c2.10937499-4.21875001 4.21875001-8.6484375 6.328125-12.86718749 1.0546875-2.53125002 2.3203125-4.8515625 3.375-7.38281251 2.10937499-4.8515625 4.21875001-9.70312501 6.11718751-14.76562498 0.84375-2.10937499 1.6875-4.00781249 2.53125-6.1171875 2.7421875-6.96093751 5.0625-14.13281251 7.38281249-21.30468752 0.421875-1.0546875 0.6328125-2.3203125 1.05468749-3.37499998 1.8984375-6.11718751 3.5859375-12.234375 5.27343752-18.35156251 0.6328125-2.53125001 1.26562501-5.0625 1.68749998-7.59375 1.0546875-4.8515625 2.3203125-9.9140625 3.16406251-14.9765625 0.6328125-2.7421875 1.0546875-5.69531248 1.4765625-8.43750002 0.84375001-4.8515625 1.6875-9.703125 2.32031254-14.55468748 0.421875-2.953125 0.84375001-5.69531248 1.05468746-8.64843749 0.6328125-5.27343751 1.0546875-10.54687499 1.4765625-15.82031251l0.6328125-7.59375c0.421875-7.8046875 0.6328125-15.609375 0.63281249-23.625l0-6.5390625-0.21093749 0c-0.84375-55.26562501-12.65624999-108.2109375-33.53906249-156.30468751l-36.703125 16.03125c19.40625 45.140625 30.1640625 94.7109375 30.16406249 146.81250001 0 7.17187501-0.2109375 14.34375001-0.6328125 21.3046875-0.2109375 2.3203125-0.421875 4.64062501-0.42187501 6.74999998-0.421875 4.8515625-0.84375001 9.49218751-1.26562499 14.34375002-0.2109375 2.53125002-0.6328125 5.27343751-1.0546875 7.80468749-0.6328125 4.4296875-1.26562501 8.859375-2.109375 13.07812502-0.421875 2.53125002-0.84375001 5.2734375-1.4765625 7.80468748-0.84375 4.4296875-1.8984375 8.859375-2.953125 13.28906251-0.6328125 2.3203125-1.0546875 4.64062501-1.6875 6.96093749-1.26562501 5.2734375-2.7421875 10.54687499-4.4296875 15.8203125-0.421875 1.26562501-0.6328125 2.7421875-1.05468751 4.00781251-2.10937499 6.53906251-4.21875001 12.86718751-6.53906249 19.1953125-0.6328125 1.6875-1.4765625 3.5859375-2.10937501 5.2734375-1.6875 4.64062501-3.5859375 9.0703125-5.48437501 13.5-1.0546875 2.3203125-2.10937499 4.4296875-3.16406248 6.75-1.8984375 4.00781249-3.796875 7.80468751-5.6953125 11.60156252-62.64843753 123.39843751-191.953125 208.1953125-341.71875 208.19531249-210.7265625 0-381.79687502-168.11718751-381.796875-375.67968751C130.20312498 304.33203125 301.2734375 136.21484377 512 136.21484377l6.75 0L518.75 96.76953127 512 96.76953128C278.9140625 96.55859375 90.12500001 282.60546873 90.12500001 511.89453125c0 229.50000001 188.78906252 415.3359375 421.87499999 415.33593752 163.68750001 0 305.43749999-91.7578125 375.2578125-225.70312502l0.21093749 0c0.6328125-1.26562501 1.26562501-2.7421875 1.89843751-4.00781251z'
							p-id='6463'
						></path>
					</svg>
					Submitting...
				</button>
			</div>
			{/* animate-ping */}
			<div>
				{/* position all base on this span */}
				<span className='relative inline-flex group'>
					<button
						type='button'
						className='py-2 px-4
				inline-flex gap-4 items-center
				shadow rounded-md
				bg-indigo-500 group-hover:bg-indigo-400
				transition ease-in-out duration-150
				
				text-white
				font-bold
				'
					>
						Transactions
					</button>
					<span
						className='flex 
					-mt-1 -mr-1
					h-3 w-3
					absolute top-0 right-0
					'
					>
						<span
							className='
							group-hover:animate-ping
							absolute inline-flex 
						rounded-full
						bg-sky-400 opacity-70
						h-full w-full'
						>
							{/* dynamic */}
						</span>
						<span
							className='
						h-3 w-3
						rounded-full
						bg-sky-500 '
						>
							{/* fixed */}
						</span>
					</span>
				</span>
			</div>

			{/* animate-pulse */}
			<div
				className='
			animate-pulse
			bg-slate-500 py-10 px-5 rounded-lg shadow-lg w-80'
			>
				<Skeleton />
			</div>

			{/* animate-bounce */}
			<div
				className='
				animate-bounce
			flex items-center justify-center
			bg-slate-600 p-2 w-10 h-10 shadow-lg rounded-full'
			>
				<svg
					viewBox='0 0 1024 1024'
					version='1.1'
					xmlns='http://www.w3.org/2000/svg'
					p-id='12399'
					width='200'
					height='200'
				>
					<path
						fill='white'
						d='M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z'
						p-id='12400'
					></path>
					<path
						fill='white'
						d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
						p-id='12401'
					></path>
				</svg>
			</div>
		</div>
	);
};

export default Animation;
